<template>
	<div id="task-list" class="task-list">
		<van-pull-refresh
			id="task-list-refresh"
			v-model="copyRefresh"
			:loosing-text="$t('pages.home.releaseToRefresh', '释放即可刷新...')"
			:loading-text="$t('pages.home.loading', '加载中...')"
			:pulling-text="$t('pages.home.pullDownRefresh', '下拉即可刷新...')"
			@refresh="init"
		>
			<van-list
				class="task-list-content"
				v-model:loading="copyLazyLoad"
				:finished="noMore"
				:loading-text="$t('pages.home.loading', '加载中...')"
				:finished-text="$t('pages.home.noMore', '没有更多了')"
				@load="onLoad"
				v-if="cardList?.length"
			>
				<TaskCard
					v-for="item in cardList"
					:cardDetail="item"
					:myTaskActive="myTaskActive"
					:showApprovalFooter="showApprovalFooter"
					:checkedAllApproval="checkedAllApproval"
					:canCheck="canCheck"
					:listFull="listFull"
					@addTaskInstanceId="addTaskInstanceId"
					@delTaskInstanceId="delTaskInstanceId"
				/>
			</van-list>
			<NoDataImg
				:cardList="cardList"
				:myTaskActive="myTaskActive"
				:searchVal="searchVal"
				:noDataText="noDataText"
				:STATE_CODE="STATE_CODE"
			/>
		</van-pull-refresh>
	</div>
</template>
<script setup lang="ts">
import TaskCard from '@/entry_mobile/components/TaskCard/index.vue'
import NoDataImg from './components/NoDataImg/index.vue'
import { watch, ref } from 'vue'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
const props = defineProps([
	'refreshLoading',
	'cardList',
	'lazyLoading',
	'noMore',
	'myTaskActive',
	'searchVal',
	'noDataText',
	'STATE_CODE',
	'showApprovalFooter',
	'checkedAllApproval',
	'canCheck',
	'listFull'
])
const emits = defineEmits(['init', 'lazyLoad', 'changeRefreshLazyload','addTaskInstanceId','delTaskInstanceId','checkAllCard'])
const copyRefresh = ref()
const copyLazyLoad = ref()
const addTaskInstanceId = (addTaskInstanceId: string) => {
	emits('addTaskInstanceId', addTaskInstanceId)
}
const delTaskInstanceId = (delTaskInstanceId:string)=>{
	emits('delTaskInstanceId', delTaskInstanceId)
}
watch(
	[() => props.refreshLoading, () => props.lazyLoading],
	(newValArr: any) => {
		;[copyRefresh.value, copyLazyLoad.value] = newValArr
	}
)
watch([() => copyRefresh.value, () => copyLazyLoad.value], (newValArr: any) => {
	emits('changeRefreshLazyload', newValArr)
})
const onLoad = () => {
	emits('lazyLoad')
}
const init = () => {
	emits('init')
}
</script>
<style lang="less" scoped>
.task-list {
	width: 100%;
	height: calc(100% - 52px);
	overflow: hidden;
	scroll-behavior: smooth;
	padding: 0 16px;
	padding-top: 10px;
	&-content {
		padding-bottom: 70px;
	}
}
.van-pull-refresh {
	height: 100%;
	overflow-y: scroll;
	&::-webkit-scrollbar {
		display: none;
	}
}
.van-list {
	padding-bottom: 80px;
}
</style>
